<template>
  <div class="tuijian">
      <header class="header">
       <router-link to='sousuo'>
           <div class="left">
            <img src="../assets/img/SearchIcon.png" >
          </div>
       </router-link>
        
        <ul class="center">
        	<router-link to='zhibo'>
        		<li class="list">直播</li>
        	</router-link>
        	
        	<router-link to='pindao'>
        		<li class="list">频道</li>
            
        	</router-link>
        	
        	<router-link to='tuijian'>
        		
            <li class="list active">推荐</li>
            
        	</router-link>
        	
        	<router-link to='dingyue'>
        		
            <li class="list">订阅</li>
        	</router-link>
            
           
            
        </ul>
        <div class="right">
            <img src="../assets/img/zhuboRight.png">
        </div>
    </header>
   
    
    <section class="section">

            <ul class="zhibozone">
                <li class="list">
                    <div class="img">
                        <img src="../assets/img/zhiboV.png">
                    </div>
                    <div class="title">【情景段子】我一个月挣好几万呢？</div>    
                    <div class="name">
                        <span class='left'>笑不出来</span>
                        <span class='right'><img src="../assets/img/cha.png"></span>
                    </div>              
                </li>
                
                <li class="list">
                    <div class="img">
                        <img src="../assets/img/lizhi.png">
                    </div>
                    <div class="title">【叔音】陪伴不是理所当然</div>    
                    <div class="name">
                        <span class='left'>叔音&歌手电台</span>
                        <span class='right'><img src="../assets/img/cha.png"></span>
                    </div>            
                </li>
                
                <li class="list">
                    <div class="img">
                        <img src="../assets/img/xiache.png">
                    </div>
                   <div class="title">【染音工作室】扫文老阿姨原著《小火车，污污污》</div>    
                    <div class="name">
                        <span class='left'>云清的作品存档</span>
                        <span class='right'><img src="../assets/img/cha.png"></span>
                    </div>             
                </li>
                
                <li class="list">
                    <div class="img">
                        <img src="../assets/img/taolu.png">
                    </div>
                    <div class="title">《我突然不像你了》</div>    
                    <div class="name">
                        <span class='left'>DJ沉默</span>
                        <span class='right'><img src="../assets/img/cha.png"></span>
                    </div>              
                </li>
                
                <li class="list">
                    <div class="img">
                        <img src="../assets/img/taolu.png">
                    </div>
                    <div class="title">《我突然不像你了》</div>    
                    <div class="name">
                        <span class='left'>DJ沉默</span>
                        <span class='right'><img src="../assets/img/cha.png"></span>
                    </div>              
                </li>
                <li class="list">
                    <div class="img">
                        <img src="../assets/img/lizhi.png">
                    </div>
                    <div class="title">【叔音】陪伴不是理所当然</div>    
                    <div class="name">
                        <span class='left'>叔音&歌手电台</span>
                        <span class='right'><img src="../assets/img/cha.png"></span>
                    </div>            
                </li>
                
            </ul>
        
        
        
        
    </section>
    
    
    
    
  </div>
</template>



<script>
import Swiper from "swiper"
    
    
export default {
  name: 'tuijian',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
     mounted () {
   window.Swiper('.swiper-container',{
        autoplay:5000,
        pagination: '.swiper-pagination',
      })
 }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
@import '.././assets/css/reset.css';    
@import '.././assets/less/style.less';
@import '.././assets/css/swiper.min.css';   
@import '.././assets/less/header.less'; 
    .header{
        margin-bottom: 0;
    }

    .section{
        position: fixed;
        .top(100);
        .left(50);
        overflow-y: auto;
        .zhibozone{
            display: flex;
            margin: 0 auto;
           
           .px2rem(width,660);
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            .list{
                flex: 1;
                .margin-top(20);
                .img{

                }
                .title{
                    .font-size(24);
                    .px2rem(width,320);
                    .px2rem(height,30);
                    .px2rem(line-height,30);
                    .margin-top(10);
                    opacity: 0.6;
                }
                
                .name{
                    .px2rem(width,320);
                    .margin-top(20);
                    .font-size(18);
                    opacity: 0.7;
                    .webkit();
                    justify-content: center;
                    align-items: center;
                    .left{
                        flex: 1;
                        opacity: 0.5;
                    }
                }
            }
        }
        
    }
    
</style>
